<template>
  <div>
    <topBar></topBar>
    <div class="container my-5">
      <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 shadow-lg">
        <div class="row">
          <div class="col-2">
            <router-link
              :to="{ path: '/governmentHangqing' }"
              class="btn btn-primary"
              >返回</router-link
            >
          </div>
        </div>
        <h4 class="text-primary">查询结果</h4>
        <h2 class="align-center">{{ date }}热度行情</h2>
        <table class="table">
          <thead class="table-success">
            <tr>
              <th scope="col">#</th>
              <th scope="col">名称</th>
              <th scope="col">买家热度</th>
              <th scope="col">卖家热度</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="index in range(start, end)" :key="index">
              <td>{{ index + 1 }}</td>
              <td>{{ cateName[index] }}</td>
              <td>{{ buyerHeat[index] }}</td>
              <td>{{ sellerHeat[index] }}</td>
            </tr>
          </tbody>
        </table>
        <div class="row">
          <div class="col-lg-5"></div>
          <div class="col-lg-1">
            <h5>
              <button class="badge bg-secondary" v-on:click="pageReduce()">
                上一页
              </button>
            </h5>
          </div>
          <div class="col-lg-1">
            <h5>
              <button class="badge bg-secondary" v-on:click="pageAdd()">
                下一页
              </button>
            </h5>
          </div>
          <div class="col-lg-5"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from "@/components/government/topBar";
export default {
  data() {
    return {
      date: "",
      data:[],
      pageNum: 8,
      cateName: [],
      buyerHeat: [],
      sellerHeat: [],
      start: 0,
      end: 0,
      begin: 0,
      part: 0,
    };
  },
  components: {
    topBar: topBar,
  },
  mounted() {
    this.date = this.$route.query.date;

    var body = {
      code: 0,
      msg: "success",
      data: {
        name: "getHotBySeller",
        result: [
          {
            marketDate: "2021-07-15T16:00:00.000+0000",
            productId: 7545,
            cateName: "甘蔗",
            buyerHeat: "889",
            buyerHeatTrend: "88800",
            sellerHeat: "1005",
            sellerHeatTrend: "33400",
          },
          {
            marketDate: "2021-07-15T16:00:00.000+0000",
            productId: 487859,
            cateName: "鸵鸟苗",
            buyerHeat: "723",
            buyerHeatTrend: "72200",
            sellerHeat: "1038",
            sellerHeatTrend: "34500",
          },
          {
            marketDate: "2021-07-15T16:00:00.000+0000",
            productId: 8501,
            cateName: "羊肉",
            buyerHeat: "862",
            buyerHeatTrend: "86100",
            sellerHeat: "1041",
            sellerHeatTrend: "34600",
          },
          {
            marketDate: "2021-07-15T16:00:00.000+0000",
            productId: 7300,
            cateName: "小葱",
            buyerHeat: "740",
            buyerHeatTrend: "73900",
            sellerHeat: "1059",
            sellerHeatTrend: "35200",
          },
          {
            marketDate: "2021-07-15T16:00:00.000+0000",
            productId: 7188,
            cateName: "鲍鱼",
            buyerHeat: "779",
            buyerHeatTrend: "77800",
            sellerHeat: "1065",
            sellerHeatTrend: "35400",
          },
          {
            marketDate: "2021-07-15T16:00:00.000+0000",
            productId: 8016,
            cateName: "鲜辣椒",
            buyerHeat: "12562",
            buyerHeatTrend: "1256100",
            sellerHeat: "10701",
            sellerHeatTrend: "356600",
          },
          {
            marketDate: "2021-07-15T16:00:00.000+0000",
            productId: 35094,
            cateName: "松茸",
            buyerHeat: "563",
            buyerHeatTrend: "56200",
            sellerHeat: "1098",
            sellerHeatTrend: "36500",
          },
          {
            marketDate: "2021-07-15T16:00:00.000+0000",
            productId: 482283,
            cateName: "鸡爪",
            buyerHeat: "1444",
            buyerHeatTrend: "144300",
            sellerHeat: "1116",
            sellerHeatTrend: "37100",
          },
          {
            marketDate: "2021-07-15T16:00:00.000+0000",
            productId: 481385,
            cateName: "多肉植物",
            buyerHeat: "619",
            buyerHeatTrend: "61800",
            sellerHeat: "1116",
            sellerHeatTrend: "37100",
          },
          {
            marketDate: "2021-07-15T16:00:00.000+0000",
            productId: 28416,
            cateName: "金线莲",
            buyerHeat: "555",
            buyerHeatTrend: "55400",
            sellerHeat: "1116",
            sellerHeatTrend: "37100",
          },
          {
            marketDate: "2021-07-15T16:00:00.000+0000",
            productId: 482896,
            cateName: "羊骨头",
            buyerHeat: "641",
            buyerHeatTrend: "64000",
            sellerHeat: "1125",
            sellerHeatTrend: "37400",
          },
          {
            marketDate: "2021-07-15T16:00:00.000+0000",
            productId: 8325,
            cateName: "丝瓜",
            buyerHeat: "1665",
            buyerHeatTrend: "166400",
            sellerHeat: "1128",
            sellerHeatTrend: "37500",
          },
          {
            marketDate: "2021-07-15T16:00:00.000+0000",
            productId: 9897,
            cateName: "黄牛",
            buyerHeat: "948",
            buyerHeatTrend: "94700",
            sellerHeat: "1128",
            sellerHeatTrend: "37500",
          },
          {
            marketDate: "2021-07-15T16:00:00.000+0000",
            productId: 8291,
            cateName: "生菜",
            buyerHeat: "658",
            buyerHeatTrend: "65700",
            sellerHeat: "1140",
            sellerHeatTrend: "37900",
          },
          {
            marketDate: "2021-07-15T16:00:00.000+0000",
            productId: 307426,
            cateName: "鹿茸",
            buyerHeat: "2850",
            buyerHeatTrend: "284900",
            sellerHeat: "1149",
            sellerHeatTrend: "38200",
          },
          {
            marketDate: "2021-07-15T16:00:00.000+0000",
            productId: 10334,
            cateName: "玉米种子",
            buyerHeat: "824",
            buyerHeatTrend: "82300",
            sellerHeat: "1152",
            sellerHeatTrend: "38300",
          },
          {
            marketDate: "2021-07-15T16:00:00.000+0000",
            productId: 8068,
            cateName: "龙虾",
            buyerHeat: "1675",
            buyerHeatTrend: "167400",
            sellerHeat: "1152",
            sellerHeatTrend: "38300",
          },
          {
            marketDate: "2021-07-15T16:00:00.000+0000",
            productId: 8397,
            cateName: "土豆",
            buyerHeat: "9752",
            buyerHeatTrend: "975100",
            sellerHeat: "11595",
            sellerHeatTrend: "386400",
          },
          {
            marketDate: "2021-07-15T16:00:00.000+0000",
            productId: 482909,
            cateName: "虾尾",
            buyerHeat: "708",
            buyerHeatTrend: "70700",
            sellerHeat: "1164",
            sellerHeatTrend: "38700",
          },
          {
            marketDate: "2021-07-15T16:00:00.000+0000",
            productId: 122170,
            cateName: "宠物狗",
            buyerHeat: "928",
            buyerHeatTrend: "92700",
            sellerHeat: "1173",
            sellerHeatTrend: "39000",
          },
        ],
      },
    };
    this.data = body.data.result;
    for (var i = 0; i < this.data.length; i++) {
      this.cateName.push(this.data[i].cateName);
      this.buyerHeat.push(this.data[i].buyerHeat);
      this.sellerHeat.push(this.data[i].sellerHeat);
    }
    this.part = Math.floor(this.data.length / this.pageNum);
    if (this.part == 0) {
      this.end = this.data.length;
    } else {
      this.end = this.pageNum;
    }
  },
  methods: {
    range(start, end) {
      var arr = [];
      for (var i = start; i < end; i++) {
        arr.push(i);
      }
      return arr;
    },
    pageAdd() {
      var gap = this.data.length - this.end;
      if (gap >= this.pageNum) {
        this.start += this.pageNum;
        this.end += this.pageNum;
      } else if (this.end != this.data.length) {
        this.start += this.pageNum;
        this.end = this.data.length;
      }
    },
    pageReduce() {
      if (this.end == this.data.length) {
        this.start -= this.pageNum;
        this.end = this.part * this.pageNum;
      } else if (this.start != 0) {
        this.start -= this.pageNum;
        this.end -= this.pageNum;
      }
    },
  },
};
</script>


<style scoped>
.align-center {
  text-align: center;
}
header {
  background-color: #2c7d72;
}
</style>